<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%--<jsp:include page="/assets/view/common/bootstrap.jsp"/>--%>
<%@ include file="/assets/view/base/tag.jsp" %>

<nav class="navbar navbar-default user-nav-mrcode">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
                    aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span> <!-- 当浏览器小于一定的宽度的时候，会显示的一个图标-->
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand logo" href="/mrcode">MrCode</a>
        </div>

        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav home-bar">
                <li id="nav-home"><a href="/">首页 <span class="sr-only">(current)</span></a></li>
            </ul>
            <%--<form class="navbar-form navbar-right">
                <div class="form-group">
                    <input type="text" placeholder="Email" class="form-control">
                </div>
                <div class="form-group">
                    <input type="password" placeholder="Password" class="form-control">
                </div>
                <button type="submit" class="btn btn-success">登录</button>
                <button type="button" class="btn btn-success">注册</button>
            </form>--%>
            <shiro:user>
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a data-toggle="tooltip" data-placement="bottom" title="写博文" href="/auth/article/create_pre">
                            <span class="icon-edit icon-1x icon-spin"></span>
                        </a>
                    </li>
                    <li>
                        <div class="navphpto">
                            <img src="/assets/image/p2.jpg" alt="..." class="img-circle" style="width: 100%">
                        </div>
                    </li>

                        <%--<shiro:principal/>--%>
                </ul>
            </shiro:user>
            <shiro:guest>
                <ul class="navbar-form navbar-right">
                    <a class="btn btn-primary" href="/account/login">登录</a>
                    <a class="btn btn-success" href="/account/register">注册</a>
                </ul>
            </shiro:guest>
        </div><!--/.navbar-collapse -->
    </div>
</nav>
<style>
    .bHeader {
        height: 200px;
        /*background: #444 url(http://img.kutoo8.com//upload/image/78018037/201305280911_960x540.jpg);*/
        background: #5bc0de;
        /*background-repeat: round;*/
        /*background-size: cover;*/
        margin-top: -20px;
    }

    .bHeader nav {
        position: relative;
        top: 156px;
    }

    /**	style used for both examples **/

    .menu {
        height: 45px;
        display: block;
    }

    .menu ul {
        list-style: none;
        /*padding: 0;*/
        margin: 0 auto;
        display: table;
    }

    .menu ul li {
        /* width and height of the menu items */
        float: left;
        overflow: hidden;
        position: relative;
        text-align: center;
        line-height: 45px;
    }

    .menu ul li a {
        /* must be postioned relative  */
        position: relative;
        display: block;
        width: 110px;
        height: 45px;
        font-family: Arial;
        font-size: 11px;
        font-weight: bold;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-decoration: none;
        cursor: pointer;
    }

    .menu ul li a span {
        /* all layers will be absolute positioned */
        position: absolute;
        left: 0;
        width: 110px;
    }

    .menu ul li a span.out {
        top: 0px;
    }

    .menu ul li a span.over,
    .menu ul li a span.bg {
        /* hide */
        top: -45px;
    }

    /** 2nd example **/

    #menu2 {
        background: rgba(0, 0, 0, 0.3);
    }

    #menu2 ul li a {
        color: #FFF;
    }

    #menu2 ul li a span.over {
        background: #FFF;
        color: #000;
    }

</style>
<div class="bHeader">
    <div class="body-wapper">
        <%--<div class="header-img">
            <img src="/assets/image/p2.jpg" alt="..." class="img-circle" style="width: 100%">
        </div>
        <p>上有天，下有地，中间站着你自己，做一天人，尽一天人事儿。</p>--%>
    </div>
    <nav>
        <div id="menu2" class="menu">
            <ul>
                <li><a href="/${account}">Home</a></li>
                <li><a id="m_list" href="/${account}/article/category/all">列表</a></li>
            </ul>
        </div>
    </nav>
</div>
<script language="javascript">
    $(document).ready(function () {
        //工具提示 初始化
        /*$('[data-toggle="tooltip"]').tooltip();*/


        /* 	1st example	*/

        /// wrap inner content of each anchor with first layer and append background layer
        $("#menu li a").wrapInner('<span class="out"></span>').append('<span class="bg"></span>');

        // loop each anchor and add copy of text content
        $("#menu li a").each(function () {
            $('<span class="over">' + $(this).text() + '</span>').appendTo(this);
        });
        /*	2nd example	*/

        $("#menu2 li a").wrapInner('<span class="out"></span>');

        $("#menu2 li a").each(function () {
            $('<span class="over">' + $(this).text() + '</span>').appendTo(this);
        });

        $("#menu2 li a").hover(function () {
            if (!$(this).hasClass("active")) {
                $(".out", this).stop().animate({'top': '45px'}, 200); // move down - hide
                $(".over", this).stop().animate({'top': '0px'}, 200); // move down - show
            }
        }, function () {
            if (!$(this).hasClass("active")) {
                $(".out", this).stop().animate({'top': '0px'}, 200); // move up - show
                $(".over", this).stop().animate({'top': '-45px'}, 200); // move up - hide
            }
        });

        /******************** 浮动 */
        var ie6 = document.all;
        var dv = $('.bHeader nav'), st;
        dv.attr('otop', dv.offset().top); //存储原来的距离顶部的距离
        $(window).scroll(function () {
            st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
            if (st > parseInt(dv.attr('otop'))) {
                if (ie6) {//IE6不支持fixed属性，所以只能靠设置position为absolute和top实现此效果
                    dv.css({position: 'absolute', top: st});
                } else if (dv.css('position') != 'fixed') {
                    dv.css({
                        'position': 'fixed',
                        'top': 0,
                        'z-index': 9999,
                        'left': 0,
                        'right': 0
                    });
                }
                ;
            } else if (dv.css('position') != 'relative') {
                dv.css({
                    'position': 'relative',
                    'top': parseInt(dv.attr('otop')) - 50
                });
            }
            ;
        });
    });


</script>
